<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat - XunAI</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
    <!-- 添加代码高亮样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
    <!-- 自定义CSS -->
    <link th:href="@{/css/chat.css}" rel="stylesheet">
</head>
<body>
<div class="app-container">
    <!-- 左侧边栏 - 历史对话 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h5 class="mb-0" id="sidebar-title">对话历史</h5>
            <button class="toggle-sidebar" id="toggle-sidebar">
                <i class="bi bi-chevron-left"></i>
            </button>
        </div>
        <div class="sidebar-content">
            <ul class="conversation-list" id="conversation-list">
                <!-- 历史对话将通过JavaScript动态加载 -->
            </ul>
            <div class="empty-state" id="empty-history">
                <i class="bi bi-chat-left-text"></i>
                <p>暂无对话历史</p>
            </div>
        </div>
        <div class="sidebar-footer">
            <button class="btn btn-primary w-100" onclick="newConversation()">
                <i class="bi bi-plus-circle me-2"></i>
                <span id="new-chat-text">新对话</span>
            </button>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content" id="main-content">
        <!-- 聊天头部（调整后的结构） -->
        <div class="chat-header">
            <!-- 左侧：对话标题 + 模型标志 -->
            <div class="header-left">
                <button class="toggle-sidebar me-3 d-lg-none" id="mobile-toggle-sidebar">
                    <i class="bi bi-list"></i>
                </button>
                <h4 class="mb-0" id="current-conversation-title">AI 聊天</h4>
                <span class="model-badge deepseek ms-2" id="current-model-badge">DeepSeek</span>
            </div>

            <!-- 中间：状态指示器 + 模型选择器 -->
            <div class="header-center">
                <!-- 状态指示器（现在在下拉框左边） -->
                <div class="status-indicator" id="status-indicator" style="display: none;"></div>

                <!-- 模型选择下拉框 -->
                <div class="model-selector">
                    <select id="model-select" class="form-select">
                        <option value="deepseek" selected>DeepSeek</option>
                        <option value="baidu">文心一言</option>
                        <option value="qwen">通义千问</option>
                    </select>
                </div>
            </div>

            <!-- 右侧：用户头像 -->
            <div class="header-right">
                <div class="user-avatar" id="user-avatar" onclick="toggleUserSidebar()">
                    <span th:text="${user.username.substring(0, 1).toUpperCase()}">U</span>
                </div>
            </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chat-messages">
            <div class="empty-state" id="empty-chat-state">
                <i class="bi bi-robot"></i>
                <h4>欢迎使用 AI 聊天</h4>
                <p>开始与AI助手对话吧！</p>
            </div>
        </div>

        <!-- 聊天输入区域 -->
        <div class="chat-input-area">
            <div class="chat-input-container">
                <textarea id="user-input" placeholder="请输入您的问题...（Enter发送，Shift+Enter换行，ESC停止生成）"></textarea>
                <div class="chat-controls">
                    <div>
                        <button class="btn btn-outline-secondary" onclick="clearChat()">
                            <i class="bi bi-trash me-1"></i>清空对话
                        </button>
                    </div>
                    <div class="d-flex align-items-center">
                        <span class="typing-indicator" id="typing-indicator" style="display: none;">
                            <i class="bi bi-activity me-1"></i>
                            <span id="typing-model-text">DeepSeek</span>正在思考...
                        </span>
                        <!-- 修改：动态按钮，JavaScript会控制其状态 -->
                        <button id="send-btn" class="btn btn-primary ms-3" onclick="startStream()">
                            <i class="bi bi-send me-1"></i>发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户信息边栏 -->
    <div class="user-sidebar" id="user-sidebar">
        <div class="user-sidebar-header">
            <h5 class="mb-0">用户信息</h5>
            <button class="toggle-sidebar" onclick="toggleUserSidebar()">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <div class="user-sidebar-content">
            <div class="text-center mb-4">
                <div class="user-avatar mx-auto mb-3" style="width: 80px; height: 80px; font-size: 32px;">
                    <span th:text="${user.username.substring(0, 1).toUpperCase()}">U</span>
                </div>
                <h4 th:text="${user.username}">用户名</h4>
                <p class="text-muted" th:text="${user.email}">user@example.com</p>
                <p class="text-muted" th:if="${user.phone}" th:text="${user.phone}">手机号</p>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title"><i class="bi bi-calendar me-2"></i>账户信息</h6>
                    <div class="mb-2">
                        <small class="text-muted">注册时间</small>
                        <p class="mb-0" th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm')}">N/A</p>
                    </div>
                </div>
            </div>

            <!-- 新增系统设置按钮 -->
            <div class="mt-3">
                <button class="btn btn-outline-primary w-100" onclick="openSettings()">
                    <i class="bi bi-gear me-2"></i>系统设置
                </button>
            </div>

            <div class="mt-3">
                <a th:href="@{/auth/logout}" class="btn btn-outline-primary w-100">
                    <i class="bi bi-box-arrow-right me-2"></i>退出登录
                </a>
            </div>
        </div>
    </div>

    <!-- 移动端遮罩层 -->
    <div class="overlay" id="overlay" onclick="closeAllSidebars()"></div>
</div>

<!-- 新增系统设置模态框 -->
<div class="modal fade settings-modal" id="settingsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">系统设置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" id="settingsTabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#generalTab">通用设置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#accountTab">账户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#dataTab">数据管理</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <!-- 通用设置 -->
                    <div class="tab-pane fade show active" id="generalTab">
                        <div class="mb-3">
                            <label class="form-label">主题设置</label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="theme" id="lightTheme" value="light" checked>
                                    <label class="form-check-label" for="lightTheme">浅色主题</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="theme" id="darkTheme" value="dark">
                                    <label class="form-check-label" for="darkTheme">深色主题</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 账户管理 -->
                    <div class="tab-pane fade" id="accountTab">
                        <form id="accountForm">
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" th:value="${user.username}">
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" th:value="${user.email}">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">手机号</label>
                                <input type="tel" class="form-control" id="phone" th:value="${user.phone ?: ''}" placeholder="请输入手机号">
                            </div>
                            <div class="mb-3">
                                <label for="currentPassword" class="form-label">当前密码</label>
                                <input type="password" class="form-control" id="currentPassword" placeholder="输入当前密码以修改信息">
                            </div>
                            <div class="mb-3">
                                <label for="newPassword" class="form-label">新密码</label>
                                <input type="password" class="form-control" id="newPassword" placeholder="留空则不修改密码">
                            </div>
                            <button type="button" class="btn btn-primary" onclick="updateAccount()">保存更改</button>
                        </form>
                    </div>

                    <!-- 数据管理 -->
                    <div class="tab-pane fade" id="dataTab">
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            此操作将永久删除所有对话记录，无法恢复。
                        </div>
                        <button type="button" class="btn btn-primary" onclick="clearAllConversations()">
                            <i class="bi bi-trash me-2"></i>清空所有对话
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 添加highlight.js库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<!-- 添加常用语言支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/java.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>

<!-- 自定义JavaScript -->
<script th:src="@{/js/chat.js}"></script>
</body>
</html>